<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>import.meta</title>
</head>
<body>
    <h1>import.meta</h1>
    <h2>为 ES 模块暴露特定于模块的元数据</h2>

    <script type="module">
        // 基本用法
        console.log(import.meta.url);
        
        // 获取模块的URL
        const moduleURL = new URL(import.meta.url);
        console.log('模块路径:', moduleURL.pathname);

        // 实际应用示例
        // 1. 资源路径解析
        function getResourcePath(relativePath) {
            const baseURL = new URL(import.meta.url);
            return new URL(relativePath, baseURL).href;
        }

        const imagePath = getResourcePath('../images/logo.png');
        console.log('图片路径:', imagePath);

        // 2. 环境检测
        const isProduction = import.meta.env?.MODE === 'production';
        console.log('是否生产环境:', isProduction);

        // 3. 模块配置
        const moduleConfig = {
            baseURL: new URL('.', import.meta.url).href,
            version: import.meta.env?.VERSION || '1.0.0',
            debug: import.meta.env?.DEV === true
        };

        // 4. 动态导入相对路径模块
        async function loadModule(relativePath) {
            const modulePath = new URL(relativePath, import.meta.url).href;
            return import(modulePath);
        }

        // 5. 开发工具集成
        if (import.meta.hot) {
            import.meta.hot.accept((newModule) => {
                // 热更新处理
                console.log('模块更新了');
            });
        }
    </script>
</body>
</html> 